<template>
  <div>
    <el-row class="row">
      <el-button @click="showCreateAlbumBox">创建相册</el-button>
    </el-row>
    <el-row>
      <el-card class="album" shadow="hover" :body-style="{padding: '0px'}" v-for="item in albumList" :key="item.id">
        <div @click="goPhotoList(item)">
          <el-image class="album_image" :src="item.coverUrl" fit="cover">
            <div slot="error">
              <img src="../../assets/pic-none.png" class="album_image" />
            </div>
          </el-image>
        </div>
        <div class="album_name">
          <span class="album_span">{{ item.name }}</span>
          <el-dropdown class="album_dropdown" trigger="click" @command="albumOperation">
            <span class="el-dropdown-link"> <i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'delete_' + item.id">
                <i class="el-icon-delete"> 删除</i>
              </el-dropdown-item>
              <el-dropdown-item :command="'rename_' + item.id + '_' + item.name">
                <i class="el-icon-edit"> 修改名称</i>
              </el-dropdown-item>
              <el-dropdown-item :command="'upload_' + item.id">
                <i class="el-icon-edit"> 修改封面</i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-card>
    </el-row>
    <upload-album ref="uploadAlbum" :albumId="albumId"></upload-album>
  </div>
</template>

<script>
import * as albumApi from '../../api/album'
import * as message from '../../utils/message'
import uploadAlbum from './components/uploadAlbum'
export default {
  name: 'index',
  data() {
    return {
      albumName: null,
      albumList: [],
      albumId: null
    }
  },
  components: {uploadAlbum},
  created() {
    this.getAlbum()
  },
  methods: {
    getAlbum() {
      albumApi
        .getAlbums()
        .then(response => {
          if (response.code === 0) {
            this.albumList = response.data
          }
        })
        .catch(err => {})
    },
    showCreateAlbumBox() {
      this.$prompt('请输入相册名称', '创建相册', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: null,
        inputErrorMessage: '相册名称不能为空'
      })
        .then(value => {
          this.createAlbum(value.value)
        })
        .catch(() => {})
    },
    createAlbum(albumName) {
      let params = {name: albumName}
      albumApi
        .createAlbum(params)
        .then(response => {
          message.messageSuccess('创建相册成功')
          this.getAlbum()
        })
        .catch(err => {
          message.messageError(err)
        })
    },
    albumOperation(command) {
      let operation = command.split('_')
      this.albumId = operation[1]
      switch (operation[0]) {
        case 'delete':
          this.showDeleteAlbumBox(operation[1])
          break
        case 'rename':
          this.showRenameAlbumBox(operation[1], operation[2])
          break
        case 'upload':
          this.uploadAlbum(operation[1])
          break
        default:
          break
      }
    },
    showDeleteAlbumBox(albumId) {
      this.$confirm('确定要删除相册吗？', '删除相册', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          this.deleteAlbum(albumId)
        })
        .catch(() => {})
    },
    deleteAlbum(albumId) {
      albumApi
        .deleteAlbum({id: albumId})
        .then(request => {
          message.messageSuccess('删除相册成功')
          this.getAlbum()
        })
        .catch(err => {})
    },
    showRenameAlbumBox(albumId, albumName) {
      this.$prompt('请输入相册新名称', '修改相册名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: null,
        inputErrorMessage: '相册名称不能为空',
        inputValue: albumName
      })
        .then(value => {
          this.renameAlbum(albumId, value.value)
        })
        .catch(() => {})
    },
    renameAlbum(albumId, name) {
      albumApi
        .renameAlbum({id: albumId, name: name})
        .then(response => {
          message.messageSuccess('修改相册名称成功')
          this.getAlbum()
        })
        .catch(err => {
          message.messageError(err)
        })
    },
    uploadAlbum(albumId) {
      this.$refs.uploadAlbum.toggleShow()
    },
    goPhotoList(item) {
      this.$router.push({
        path: '/photo/photo_list',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style scoped>
.row {
  margin: 10px;
}
.album {
  width: 250px;
  height: 300px;
  margin: 10px;
  padding-bottom: 10px;
  float: left;
}
.album_image {
  height: 250px;
  width: 250px;
  cursor: pointer;
  display: block;
}
.album_name {
  margin: 15px;
}
.album_dropdown {
  float: right;
  cursor: pointer;
}
.album_span {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
</style>
